<template>
     <div class="yh-form">
          <el-form :label-width="labelWidth" :model="formData" ref="formRef">
               <slot name="paddword"></slot>
               <el-row
                    :class="
                         senior === 'senior' ? 'yh-senior form-class'
                         : senior === 'history' ? 'yh-history'
                         : 'form-class'
                    ">
                    <template v-for="(item, index) in formItems" :key="index">
                         <el-col v-bind="colLayout" v-if="item?.visible">
                              <template v-if="item.slotName">
                                   <slot :name="item.slotName" :row="item" :data="formData"></slot>
                              </template>
                              <template v-else>
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' || senior === 'history' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'input'">
                                        <el-input
                                             class="elinput"
                                             v-model="formData[`${item.field}`]"
                                             :disabled="item.disabled"
                                             :placeholder="item.placeHolder" />
                                   </el-form-item>
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'password'">
                                        <el-input
                                             v-model="formData[`${item.field}`]"
                                             :disabled="item.disabled"
                                             :placeholder="item.placeHolder"
                                             show-password />
                                   </el-form-item>
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'number'">
                                        <el-input
                                             v-model.number="formData[`${item.field}`]"
                                             :disabled="item.disabled"
                                             :placeholder="item.placeHolder" />
                                   </el-form-item>
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'textarea'">
                                        <el-input
                                             type="textarea"
                                             :disabled="item.disabled"
                                             v-model="formData[`${item.field}`]"
                                             :placeholder="item.placeHolder" />
                                   </el-form-item>
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'select'">
                                        <el-select
                                             :disabled="item.disabled"
                                             v-model="formData[`${item.field}`]"
                                             :placeholder="item.placeHolder"
                                             style="width: 100%"
                                             :filterable="item.filterable"
                                             :clearable="item.clearable"
                                             :popper-class="nestingiframetype === 'jump' ? 'from-select-class2' : 'from-select-class'">
                                             <el-option
                                                  v-for="option in item.options"
                                                  :key="option.value"
                                                  :value="option.value"
                                                  :label="option.label"></el-option>
                                        </el-select>
                                   </el-form-item>
                                   <!-- select 多选 -->
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'selectdx'">
                                        <el-select
                                             :disabled="item.disabled"
                                             v-model="formData[`${item.field}`]"
                                             :placeholder="item.placeHolder"
                                             multiple
                                             collapse-tags
                                             style="width: 100%"
                                             :popper-class="nestingiframetype === 'jump' ? 'from-select-class2' : 'from-select-class'">
                                             <el-option
                                                  v-for="option in item.options"
                                                  :key="option.value"
                                                  :value="option.value"
                                                  :label="option.label"></el-option>
                                        </el-select>
                                   </el-form-item>
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'cascader'">
                                        <el-cascader
                                             :popper-class="nestingiframetype === 'jump' ? 'from-cascader-class2' : 'from-cascader-class'"
                                             v-model="formData[`${item.field}`]"
                                             :options="item.cascader"
                                             clearable
                                             :props="item.props"
                                             :placeholder="item.placeHolder"
                                             collapse-tags />
                                   </el-form-item>
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' || senior === 'history' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'datepicker'">
                                        <el-config-provider :locale="locale">
                                             <el-date-picker
                                                  popper-class="form-date-class"
                                                  v-model="formData[`${item.field}`]"
                                                  :placeholder="item.placeHolder"
                                                  :value-format="item.otherOption.valueFormat"
                                                  style="width: 100%"></el-date-picker>
                                        </el-config-provider>
                                   </el-form-item>
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'picker'">
                                        <el-date-picker
                                             popper-class="form-date-class"
                                             v-model="formData[`${item.field}`]"
                                             v-bind="item.otherOption"
                                             :placeholder="item.placeHolder"
                                             style="width: 100%"></el-date-picker>
                                   </el-form-item>
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'month'">
                                        <el-date-picker
                                             popper-class="form-date-class"
                                             v-model="formData[`${item.field}`]"
                                             v-bind="item.otherOption"
                                             :placeholder="item.placeHolder"
                                             style="width: 100%"
                                             type="month"></el-date-picker>
                                   </el-form-item>
                                   <el-form-item
                                        :label="item.label"
                                        :rules="item.rules"
                                        :prop="item.field"
                                        :class="item.label.length > 7 ? 'foldLabel form-item' : 'form-item'"
                                        :style="senior === 'senior' ? itemStyleserin : itemStyle"
                                        v-if="item.type === 'Switch'">
                                        <el-switch
                                             v-model="formData[`${item.field}`]"
                                             class="ml-2"
                                             style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                                   </el-form-item>
                              </template>
                         </el-col>
                    </template>
                    <el-col v-bind="colLayout">
                         <div class="footer">
                              <slot name="footer"></slot>
                         </div>
                    </el-col>
               </el-row>
          </el-form>
     </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import type { FormInstance } from 'element-plus'
import { IFormItem } from '../types'
// import zhCn from "element-plus/lib/locale/lang/zh-cn";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
export default defineComponent({
     props: {
          senior: {
               type: String,
               default: () => 'null',
          },
          modelValue: {
               type: Object,
          },
          labelWidth: {
               type: String,
               default: () => '80px',
          },
          formItems: {
               type: Array as PropType<IFormItem[]>,
               default: () => [],
          },
          itemStyle: {
               type: Object,
               default: () => ({ padding: '10px 10px' }),
          },
          itemStyleserin: {
               type: Object,
               default: () => ({ padding: '10px 10px', width: '300px' }),
          },
          nestingiframetype: {
               type: String,
               default: '',
          },
          colLayout: {
               type: Object,
               default: () => ({
                    xl: 6, // ≥1920px
                    lg: 8, // ≥1200px
                    md: 12, // ≥992px
                    sm: 24, // ≥768px
                    xs: 24, // <768px
               }),
          },
     },
     emit: ['update:modelValue', 'modalChange'],
     setup(props, { emit }) {
          // interface IFormData {
          //      [key: string]: any;
          // }
          const locale = ref(zhCn)

          const formData = ref()
          const formRef = ref<FormInstance>()
          watch(
               () => props,
               (newValue) => {
                    formData.value = newValue.modelValue
                    emit('modalChange', newValue.modelValue)
                    emit('update:modelValue', newValue.modelValue)
               },
               {
                    deep: true,
                    immediate: true,
               },
          )
          const cascader = ref()
          // watch(
          //   formData,
          //   (newValue) => {
          //       emit('modalChange', newValue)
          //       emit('update:modelValue', newValue)
          //   },
          //   { deep: true }
          // )

          return {
               formData,
               formRef,
               locale,
               cascader,
          }
     },
})
</script>

<style scoped lang="scss">
// 高级选择器 form布局
.yh-senior {
     display: flex;
     flex-direction: column;
}

.yh-form {
     padding: 0;

     .form-class {
          width: 98%;
          // float: left;

          .footer {
               padding: 10px;
          }
     }

     // 历史记录 from布局
     .yh-history {
          width: 100%;
          // float: left;

          .footer {
               padding: 10px;
          }
     }
}
</style>
